<template>
    <div class="activity-label" :style="`${fontColor}${borderThemeColor(.3)}`">
        <div class="activity-label__item" :style="`${borderThemeColor(.3)}`" v-for="(item, index) in activityList" :key="index">{{ item }}</div>
    </div>
</template>

<script>
import ModeMixin from '@common/mixin';
export default {
    name: 'ActivityLabel',
    mixins: [ModeMixin],
    props: {
        activityList: {
            type: Array,
            default() {
                return [];
            },
        },
    },
};
</script>

<style lang="less">
.activity-label {
    display: inline-block;
    height: 20px;
    line-height: 20px;
    border-width: .5px;
    border-style: solid;
    font-size: @font-size-sm;
    border-radius: 2px;
    font-weight: 400;
    .activity-label__item {
        height: 12px;
        line-height: 12px;
        .m-t(4);
        float: left;
        .p-h(@gap-sm);
        border-right: 0.5px solid transparent;
        &:last-child {
            border: none;
        }
    }
}
</style>
